<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../static/css/style.css">
    <script src="../static/js/jquery.js"></script>
    <script src="../static/js/teacherview.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js" defer></script>

    <style>
        /* 基础布局样式 - 统一基础框架 */
        .main-container {
            display: flex;
            height: calc(100vh - 60px); /* 减去头部高度 */
        }

        .content {
            flex: 1;
            height: 100%;
            overflow: hidden; /* 防止内容溢出导致的外部滚动条 */
        }

        .content-box {
            height: 100%;
            display: none; /* 默认隐藏所有内容盒子 */
        }

        .content-box.active {
            display: block; /* 只显示激活的内容盒子 */
        }

        /* 聊天室专用样式 */
        #chatroom {
            display: none;
        }
        #chatroom.active {
            display: block;
        }

        /* 聊天窗口样式优化 - 与学生端统一 */
        .content-box.chat {
            padding: 0; /* 移除内边距，避免iframe周围出现空白 */
        }

        .chat-iframe {
            width: 100%;
            height: 100%; /* 完全填满父容器 */
            border: none; /* 使用CSS移除边框，替代frameborder属性 */
            overflow: auto; /* 按需显示滚动条 */
            display: block; /* 消除inline元素默认的底部间隙 */
        }

        /* 聊天容器核心样式 */
        .chat-container {
            display: flex;
            flex-direction: column;
            height: calc(100vh - 180px);
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            overflow: hidden;
        }

        .chat-wrapper {
            display: flex;
            gap: 10px;
            height: 100%;
        }
        .user-list-panel {
            width: 200px;
            border-right: 1px solid #e0e0e0;
            padding: 10px;
            overflow-y: auto;
            background-color: #fcfcfc;
        }
        .user-list-panel h3 {
            margin-top: 0;
            padding-bottom: 8px;
            border-bottom: 1px solid #eee;
            font-size: 16px;
        }
        .user-item {
            padding: 6px 0;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
        }
        .user-item.teacher::before {
            content: "👨‍🏫";
        }
        .user-item.student::before {
            content: "👨‍🎓";
        }
        .user-item.system::before {
            content: "🔔";
        }

        /* 聊天区域样式 */
        .chat-main {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        #chatArea {
            flex: 1;
            padding: 15px;
            overflow-y: auto;
            background-color: #f9f9f9;
        }

        /* 聊天气泡核心样式 */
        .message {
            margin: 2px 0;
            max-width: 70%;
            padding: 6px 10px;
            border-radius: 8px;
            word-wrap: break-word;
            position: relative;
            display: inline-block;
            clear: both;
            line-height: 1.4;
            border: none;
        }
        /* 自己的消息（右侧） */
        .message.self {
            background-color: #95ec69;
            float: right;
            border-top-right-radius: 2px;
        }
        /* 他人的消息（左侧） */
        .message.others {
            background-color: #ffffff;
            float: left;
            border-top-left-radius: 2px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }
        /* 自己的名称样式 */
        .message.self strong {
            text-align: right;
            display: block;
            margin: 0;
            line-height: 1.2;
        }
        /* 他人的名称样式 */
        .message.others strong {
            text-align: left;
            display: block;
            margin: 0;
            line-height: 1.2;
        }
        .message.system {
            background-color: #f0f0f0;
            color: #888;
            margin: 4px auto; /* 整体居中 */
            max-width: 50%;
            text-align: center; /* 文本内容居中 */
            font-size: 13px;
            float: none; /* 取消浮动 */
            padding: 4px 10px;
            display: table; /* 宽度适应内容 */
        }
        /* 名称与内容间距控制 */
        .message strong + .content {
            display: block;
            padding-top: 1px;
            padding: 0;
            margin: 0;
        }
        /* 系统消息名称样式 */
        .message.system strong {
            display: block;
            margin: 0 0 1px 0;
            color: #777;
        }
        /* 发送者名称基础样式 */
        .message strong {
            font-size: 12px;
            color: #555;
            padding: 0;
        }
        .message.self strong {
            color: #2d7d0e;
        }
        /* 聊天输入区域 */
        .chat-input-area {
            display: flex;
            padding: 10px;
            border-top: 1px solid #e0e0e0;
            background-color: #fff;
            gap: 10px;
        }
        #messageInput {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            outline: none;
        }
        #messageInput:focus {
            border-color: #4285f4;
        }
        /* AI生成教案专用样式 */
        #lesson-ai-prompt {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            min-height: 80px;
            resize: vertical;
            font-size: 14px;
            line-height: 1.5;
            transition: border-color 0.3s;
            margin-bottom: 15px;
        }

        #lesson-ai-prompt:focus {
            border-color: #6f42c1;
            outline: none;
            box-shadow: 0 0 0 2px rgba(111, 66, 193, 0.2);
        }

        #generate-with-ai {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 20px;
            background: linear-gradient(135deg, #6f42c1, #8a63d2);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            width: 100%;
            margin-bottom: 15px;
        }

        #generate-with-ai:hover {
            background: linear-gradient(135deg, #5a32a3, #6f42c1);
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(111, 66, 193, 0.2);
        }

        #generate-with-ai:active {
            transform: translateY(0);
        }

        #generate-with-ai i {
            font-size: 16px;
        }

         #create-lesson-modal .modal-content {
             width: 600px;
             max-width: 90vw;
             max-height: 90vh;
             overflow-y: auto;
         }

        /* 调整表单元素间距 */
        .modal-form {
            padding: 15px;
        }

        /* 调整文本区域高度 */
        #lesson-objective, #lesson-remark, #lesson-ai-prompt {
            min-height: 80px;
            max-height: 200px;
        }

        /* 新增的关闭按钮样式 */
         .close-modal {
             position: absolute;
             right: 20px;
             top: 15px;
             font-size: 24px;
             font-weight: bold;
             color: #666;
             background: none;
             border: none;
             cursor: pointer;
             padding: 0;
             line-height: 1;
         }

        .close-modal:hover {
            color: #333;
        }

        /* AI生成面板样式 */
        #ai-panel-container {
            position: fixed;
            right: -300px;
            top: 100px;
            width: 300px;
            background: white;
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
            border-radius: 5px 0 0 5px;
            transition: right 0.3s ease;
            z-index: 1000;
        }

        #ai-panel-container.show {
            right: 0;
        }

        #ai-toggle-btn {
            position: absolute;
            left: -40px;
            top: 10px;
            width: 40px;
            height: 40px;
            background: #6f42c1;
            color: white;
            border: none;
            border-radius: 5px 0 0 5px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #ai-toggle-btn i {
            font-size: 20px;
        }

        #ai-panel-content {
            padding: 15px;
        }

        #ai-panel-content h4 {
            margin-top: 0;
            color: #6f42c1;
        }

        /* AI分析模态框样式 */
        #ai-analysis-modal .modal-content {
            max-width: 600px;
            max-height: 80vh;
            display: flex;
            flex-direction: column;
        }

        #ai-analysis-modal .modal-body {
            flex: 1;
            overflow-y: auto;
        }

        #ai-analysis-text {
            width: 100%;
            height: 300px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            resize: none;
            font-family: inherit;
            line-height: 1.5;
        }
        .user-menu {
            position: relative;
            display: inline-block;
        }
        .username {
            cursor: pointer;
            color: #2c3e50;
            font-weight: 600;
            padding: 8px 16px;
            border-radius: 6px;
            background-color: #f8fafc;
            border: 1px solid #e2e8f0;
            transition: all 0.2s ease;
        }
        .username:hover {
            background-color: #e2e8f0;
            transform: translateY(-1px);
        }

        /* 弹窗样式 */
        .teacher-modal {
            display: none; /* 默认隐藏 */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(2px);
        }
        .modal-content {
            background-color: white;
            width: 500px;
            border-radius: 10px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            animation: modalFadeIn 0.3s ease;
        }
        @keyframes modalFadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .modal-header {
            padding: 16px 24px;
            border-bottom: 1px solid #f1f5f9;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f8fafc;
        }
        .modal-header h3 {
            margin: 0;
            color: #1e293b;
            font-size: 1.25rem;
        }
        .close-modal {
            cursor: pointer;
            font-size: 1.5rem;
            color: #64748b;
            transition: color 0.2s ease;
        }
        .close-modal:hover {
            color: #dc2626;
        }
        .modal-body {
            padding: 24px;
        }
        .modal-body .loading {
            text-align: center;
            color: #64748b;
            padding: 30px 0;
            font-style: italic;
        }
        .modal-footer {
            padding: 16px 24px;
            border-top: 1px solid #f1f5f9;
            text-align: right;
            background-color: #f8fafc;
        }
        .logout-btn {
            padding: 8px 16px;
            background-color: #dc2626;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            transition: background-color 0.2s ease;
        }
        .logout-btn:hover {
            background-color: #b91c1c;
        }

        /* 个人信息项样式 */
        .info-item {
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 1px dashed #f1f5f9;
        }
        .info-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        .info-item strong {
            display: inline-block;
            width: 120px;
            color: #64748b;
            font-weight: 600;
        }
        .info-item span {
            color: #1e293b;
        }
    </style>
</head>
<body>
<div class="student-management-page">
    <!-- 头部导航 -->
    <header class="main-header">
        <div class="logo">
            <i class="fas fa-graduation-cap"></i>
            <h1>大模型师生助手</h1>
        </div>
        <div class="user-menu">
            <!-- 用户名显示区域（点击触发弹窗） -->
            <span class="username" id="username">加载中...</span>
        </div>

        <!-- 教师个人信息弹窗（默认隐藏） -->
        <div class="teacher-modal" id="userModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>教师信息</h3>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body" id="teacherInfo">
                    <!-- 个人信息将通过AJAX动态加载 -->
                    <div class="loading">加载中...</div>
                </div>
                <div class="modal-footer">
                    <button class="logout-btn" id="logoutBtn">退出登录</button>
                </div>
            </div>
        </div>
    </header>

    <!-- 主容器 -->
    <div class="main-container">
        <!-- 侧边栏导航 -->
        <aside class="sidebar">
            <nav class="sidebar-nav">
                <ul>
                    <li class="active"><a href="#student-management"><i class="fas fa-user-graduate"></i><span>学生管理</span></a></li>
                    <li><a href="#lesson-plan-management"><i class="fas fa-book-open"></i><span>教案管理</span></a></li>
                    <li class="examRa"><a href="#exam-management"><i class="fas fa-file-alt"></i><span>考试管理</span></a></li>
                    <li><a href="#chatroom"><i class="fas fa-comments"></i><span>聊天室</span></a></li>
                </ul>
            </nav>
        </aside>

        <!-- 主要内容区域 -->
        <main class="content">
            <!-- 学生管理内容 -->
            <div id="student-management" class="content-box active">
                <div class="content-header">
                    <h2>学生管理</h2>
                    <div class="header-actions">
                        <button class="btn primary" id="add-student">添加学生</button>
                    </div>
                </div>

                <!-- 筛选栏 -->
                <div class="filter-bar">
                    <div class="search-boxes">
                        <div class="search-box">
                            <input type="text" placeholder="搜索学生姓名..." class="search-input" id="search-student-name">
                            <input type="text" placeholder="搜索手机号..." class="search-input" id="search-student-phone">
                            <button class="search-btn" id="search-student-btn"><i class="fas fa-search"></i></button>
                        </div>
                    </div>

                    <!-- 班级筛选框放在最右侧 -->
                    <div class="filter-options">
                        <select class="form-select" id="class-filter">
                            <option value="0">全部班级</option>
                            <!-- 选项将通过JS动态加载 -->
                        </select>
                    </div>
                </div>

                <!-- 数据表格 -->
                <div class="card">
                    <table class="data-table studentContentBox">
                        <thead>
                        <tr>
                            <th>id</th>
                            <th>姓名</th>
                            <th>学号</th>
                            <th>性别</th>
                            <th>年龄</th>
                            <th>电话号码</th>
                            <th>班级</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!-- 动态填充数据 -->
                        </tbody>
                    </table>
                </div>

                <!-- 分页 -->
                <div class="pagination studentPageBox">
                    <!-- 动态生成分页 -->
                </div>
            </div>

            <!-- 教案管理内容 -->
            <div id="lesson-plan-management" class="content-box">
                <div class="content-header">
                    <h2>教案管理</h2>
                    <div class="header-actions">
                        <button class="btn primary" id="create-lesson-plan">生成教案</button>
                    </div>
                </div>

                <!-- 筛选栏 -->
                <div class="filter-bar">
                    <div class="search-boxes">
                        <div class="search-box" style="width: 50%;"> <!-- 添加style属性将宽度设为50% -->
                            <input type="text" class="search-input" id="search-lesson-name" placeholder="请输入教案名称">
                            <button class="search-btn" id="search-lesson-btn">搜索</button>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <table class="data-table lessonContentBox">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>教案名称</th>
                            <th>教学目标</th>
                            <th>是否考试</th>
                            <th>创建人</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!-- 动态填充数据 -->
                        </tbody>
                    </table>
                </div>

                <!-- 分页 -->
                <div class="pagination lessonPageBox">
                    <!-- 动态生成分页 -->
                </div>
            </div>

            <!-- 预览教案模态框 -->
            <div class="modal" id="preview-lesson-modal">
                <div class="modal-content" style="max-width: 800px;">
                    <div class="modal-header">
                        <h3>教案预览</h3>
                        <button class="close-modal">&times;</button>
                    </div>
                    <div class="modal-body" id="preview-lesson-content" style="padding: 20px; max-height: 70vh; overflow-y: auto;">
                        <!-- 预览内容将在这里动态加载 -->
                    </div>
                    <div class="form-actions">
                        <button type="button" class="btn primary" id="download-lesson-btn">下载教案</button>
                        <button type="button" class="btn secondary" id="close-preview-btn">关闭</button>
                    </div>
                </div>
            </div>

            <!-- 考试管理内容 -->
            <div id="exam-management" class="content-box">
                <div class="content-header">
                    <h2>考试管理</h2>
                </div>
                <div class="filter-bar">
                    <div class="search-boxes">
                        <div class="search-box">
                            <input type="text" placeholder="搜索教案名称..." class="search-input" id="search-tp-name">
                            <button class="search-btn" id="search-tp-btn"><i class="fas fa-search"></i></button>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <table class="data-table examContentBox">
                        <thead>
                        <tr>
                            <th>id</th>
                            <th>教案名称</th>
                            <th>创建时间</th>
                            <th>创建人</th>
                            <th>考试次数</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!-- 动态填充数据 -->
                        </tbody>
                    </table>
                </div>
                <div class="pagination examPageBox">
                    <!-- 动态生成分页 -->
                </div>
                <div class="explain-text" style="text-align: center; margin-top: 8px; color: #999;">
                    注："暂无"表示该教案没有生成过考卷；搜索后点击左侧"考试管理"可实现重置。
                </div>
            </div>

            <!-- 聊天室内容 -->
            <div id="chatroom" class="content-box">
                <div class="card chat-container">
                    <iframe src="chatroom" class="chat-iframe" scrolling="auto"></iframe>
                </div>
            </div>
        </main>
    </div>
</div>

<!-- 添加学生模态框 -->
<div class="modal" id="add-student-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>添加学生</h3>
            <button class="close-modal">&times;</button>
        </div>
        <form class="modal-form" id="student-form">
            <div class="form-row">
                <div class="form-group">
                    <label for="student-name">学生姓名</label>
                    <input type="text" id="student-name" placeholder="请输入学生姓名" required>
                </div>
                <div class="form-group">
                    <label for="student-id">学号</label>
                    <input type="text" id="student-id" placeholder="请输入学号" required>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="student-gender">性别</label>
                    <select id="student-gender" required>
                        <option value="">请选择</option>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="student-class">班级</label>
                    <select id="student-class" required>
                        <option value="">请选择</option>
                        <!-- 选项将通过JS动态加载 -->
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="student-phone">联系方式</label>
                    <input type="text" id="student-phone" placeholder="请输入联系电话" required>
                </div>
                <div class="form-group">
                    <label for="student-age">年龄</label>
                    <input type="number" id="student-age" placeholder="请输入年龄" required min="1" max="100">
                </div>
            </div>
            <div class="form-actions">
                <button type="button" class="btn secondary" id="cancel-student-btn">取消</button>
                <button type="submit" class="btn primary">保存</button>
            </div>
        </form>
    </div>
</div>

<!-- 编辑学生模态框 -->
<div class="modal" id="edit-student-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>编辑学生</h3>
            <button class="close-modal">&times;</button>
        </div>
        <form class="modal-form" id="edit-student-form">
            <input type="hidden" id="edit-student-id">
            <div class="form-row">
                <div class="form-group">
                    <label for="edit-student-name">学生姓名</label>
                    <input type="text" id="edit-student-name" placeholder="请输入学生姓名" required>
                </div>
                <div class="form-group">
                    <label for="edit-student-id">学号</label>
                    <input type="text" id="edit-student-Sno" placeholder="请输入学号" required>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="edit-student-gender">性别</label>
                    <select id="edit-student-gender" required>
                        <option value="">请选择</option>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="edit-student-class">班级</label>
                    <select id="edit-student-class" required>
                        <option value="">请选择</option>
                        <!-- 选项将通过JS动态加载 -->
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="edit-student-phone">联系方式</label>
                    <input type="text" id="edit-student-phone" placeholder="请输入联系电话" required>
                </div>
                <div class="form-group">
                    <label for="edit-student-age">年龄</label>
                    <input type="number" id="edit-student-age" placeholder="请输入年龄" required min="1" max="100">
                </div>
            </div>
            <div class="form-actions">
                <button type="button" class="btn secondary" id="cancel-edit-student-btn">取消</button>
                <button type="submit" class="btn primary">保存</button>
            </div>
        </form>
    </div>
</div>

<!-- 创建教案模态框 -->
<div class="modal" id="create-lesson-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>创建教案</h3>
            <button class="close-modal">&times;</button>
        </div>
        <form class="modal-form" id="lesson-form">
            <div class="form-row">
                <div class="form-group">
                    <label for="lesson-name">教案名称</label>
                    <input type="text" id="lesson-name" placeholder="请输入教案名称" required>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="lesson-objective">教学目标</label>
                    <textarea id="lesson-objective" name="objective" class="form-control"
                              rows="5" style="width: 100%; max-width: 800px;"
                    placeholder="请输入教学目标"></textarea>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="lesson-remark">教学内容</label>
                    <textarea id="lesson-remark" name="remark" class="form-control"
                              rows="10" style="width: 100%; max-width: 800px;"
                    placeholder="请输入详细教学内容"></textarea>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="lesson-is-exam">是否考试</label>
                    <select id="lesson-is-exam" required>
                        <option value="0">否</option>
                        <option value="1">是</option>
                    </select>
                </div>
            </div>
            <div class="form-actions">
                <button type="button" class="btn secondary" id="cancel-lesson-btn">取消</button>
                <button type="submit" class="btn primary">保存</button>
            </div>
        </form>
    </div>
</div>


<!--ai分析 -->
<div id="ai-analysis-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>AI分析结果</h3>
            <button class="close-modal" id="close-ai-modal"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
            <div class="analysis-result">
                <textarea id="ai-analysis-text" readonly></textarea>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn primary" id="download-analysis-btn">
                <i class="fas fa-download"></i> 下载分析结果
            </button>
        </div>
    </div>
</div>

<!-- 创建考试模态框 -->
<div class="modal" id="create-exam-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>创建考试</h3>
            <button class="close-modal">&times;</button>
        </div>
        <div class="modal-form">
            <div class="form-row">
                <div class="form-group">
                    <label for="exam-name">考试名称</label>
                    <input type="text" id="exam-name" placeholder="请输入考试名称">
                </div>
                <div class="form-group">
                    <label for="exam-lesson">关联教案</label>
                    <select id="exam-lesson">
                        <option value="1">人工智能基础</option>
                        <option value="2">机器学习算法</option>
                        <option value="3">深度学习基础</option>
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="exam-start">开始时间</label>
                    <input type="datetime-local" id="exam-start">
                </div>
                <div class="form-group">
                    <label for="exam-end">结束时间</label>
                    <input type="datetime-local" id="exam-end">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="exam-duration">考试时长(分钟)</label>
                    <input type="number" id="exam-duration" placeholder="请输入考试时长">
                </div>
                <div class="form-group">
                    <label for="exam-class">适用班级</label>
                    <select id="exam-class" multiple>
                        <option value="1">计算机1班</option>
                        <option value="2">计算机2班</option>
                        <option value="3">人工智能班</option>
                    </select>
                </div>
            </div>
            <div class="form-actions">
                <button class="btn secondary">取消</button>
                <button class="btn primary">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 生成考卷 -->
<div class="modal" id="generate-exam-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>生成考卷</h3>
            <button class="close-modal">&times;</button>
        </div>
        <form class="modal-form" id="exam-generation-form">
            <div class="form-row">
                <div class="form-group">
                    <label for="choice-count">选择题数量</label>
                    <input type="number" id="choice-count" class="form-control" min="0" value="5">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="fill-count">填空题数量</label>
                    <input type="number" id="fill-count" class="form-control" min="0" value="5">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="judge-count">判断题数量</label>
                    <input type="number" id="judge-count" class="form-control" min="0" value="5">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="essay-count">简答题数量</label>
                    <input type="number" id="essay-count" class="form-control" min="0" value="2">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="calculate-count">计算题数量</label>
                    <input type="number" id="calculate-count" class="form-control" min="0" value="2">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="exam-remark">备注</label>
                    <textarea id="exam-remark" class="form-control" rows="3"
                              placeholder="可输入考卷难度、重点考察内容等备注信息" style="width: 469px; height: 53px;"></textarea>
                </div>
            </div>
            <div class="form-actions">
                <button type="button" class="btn secondary" id="cancel-generate-exam-btn">取消</button>
                <button type="button" class="btn primary" id="confirm-generate-exam">
                    <i class="fas fa-magic"></i> 生成考卷
                </button>
            </div>
        </form>
    </div>
</div>


<!-- 考卷预览弹框 -->
<div class="modal" id="exam-preview-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>考卷预览</h3>
            <button class="close-modal">&times;</button>
        </div>

        <!-- 新增：用带内边距的 div 包裹内容，实现留白 -->
        <div class="modal-body" id="exam-preview-content" style="padding: 1rem !important;">
            <div style="padding: 1.5rem !important; min-height: calc(100% - 3rem);">
                <!-- 这里动态填充试卷 HTML -->
            </div>
        </div>

        <div class="modal-footer" style="padding: 1rem !important;">
            <button type="button" class="btn primary btn-success" id="download-word-btn">
                <i class="fas fa-download"></i> 下载 Word 版
            </button>
            <button type="button" class="btn btn-secondary" id="close-modal-btn">
                <i class="fas fa-times"></i> 关闭
            </button>
        </div>
    </div>
</div>

<!-- 发布考试弹框 -->
<div class="modal" id="publish-exam-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>发布考试</h3>
            <button class="close-modal">&times;</button>
        </div>
        <div class="modal-form">
            <div class="form-row">
                <div class="form-group">
                    <label for="exam-publish-time">考试发布时间</label>
                    <input type="datetime-local" id="exam-publish-time">
                </div>
                <div class="form-group">
                    <label for="exam-duration">考试时长(分钟)</label>
                    <input type="number" id="exam-duration-min" placeholder="请输入考试时长">
                </div>
            </div>
            <div class="form-actions">
                <button class="btn secondary " id="public-cancel">取消</button>
                <button class="btn primary" id="public-exam">发布</button>
            </div>
        </div>
    </div>
</div>

<script>
    // 点击模态框外部关闭
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('modal')) {
            e.target.classList.remove('show');
        }
    });

    // 创建教案按钮点击事件
    document.getElementById('create-lesson-plan').addEventListener('click', function() {
        document.getElementById('create-lesson-modal').classList.add('show');
    });

    // 关闭创建教案模态框
    document.getElementById('cancel-lesson-btn').addEventListener('click', function() {
        document.getElementById('create-lesson-modal').classList.remove('show');
    });

    // 侧边栏导航切换
    document.querySelectorAll('.sidebar-nav a').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            // 移除所有激活状态
            document.querySelectorAll('.sidebar-nav li').forEach(li => {
                li.classList.remove('active');
            });
            document.querySelectorAll('.content-box').forEach(box => {
                box.classList.remove('active');
            });
            // 添加当前激活状态
            this.parentElement.classList.add('active');
            const targetId = this.getAttribute('href').substring(1);
            document.getElementById(targetId).classList.add('active');
        });
    });
</script>

<!-- AI生成侧边栏 -->
<div id="ai-panel-container">
    <button id="ai-toggle-btn"><i class="fas fa-robot"></i></button>
    <div id="ai-panel-content">
        <h4><i class="fas fa-magic"></i> AI教案助手</h4>
        <p>请输入您的需求，AI将为您生成教案初稿：</p>
        <textarea id="lesson-ai-prompt"
                  placeholder="例如：生成一份高中数学三角函数教案，包含教学目标、重点难点和例题..."
                  style="width:100%; height:120px; margin:10px 0; padding:8px;"></textarea>
        <button id="generate-with-ai" class="btn primary" style="width:100%;">
            <i class="fas fa-sparkles"></i> 生成教案
        </button>
    </div>
</div>
</body>
</html>